<template>
  <BorderBox title="机房信息" :headerBottom="false" :wrapperStyle="{ margin: '16px 0' }">
    <template #main_info>
      <div class="flex">
        <div class="flex_l">
          <ga-descriptions :column="1" :align="{ label: 'right' }">
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="机房机柜"> - </ga-descriptions-item>
            <ga-descriptions-item label="U位">2015-04-25 </ga-descriptions-item>
          </ga-descriptions>
        </div>
        <div class="flex_r">
          <ga-timeline mode="left" labelPosition="relative">
            <ga-timeline-item
              position="bottom"
              dot-type="hollow"
              v-for="(item, index) in 3"
              :key="index"
              :dotColor="index % 2 === 0 ? '#52C419' : ''"
            >
              <template #label> 2020-09-30 16:30:29</template>
              <div class="content flex">
                <p class="opt_name">操作人<span>宋伊童思</span></p>
                <div class="content_detail flex">
                  <div style="width: 64px; color: #2c406899">详情</div>
                  <span>
                    添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加
                    添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加
                    添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加添加
                  </span>
                </div>
              </div>
            </ga-timeline-item>
          </ga-timeline>
        </div>
      </div>
    </template>
  </BorderBox>
</template>

<script setup>
import { ref } from "vue";
</script>

<style lang="scss" scoped>
.flex_l {
  background: #f7f9fc;
  padding: 8px;
  width: 228px;
}
.flex_r {
  flex: 1;
  margin-left: 52px;
  max-height: 300px;
  overflow-y: auto;
  .content {
    span {
      color: #2c4068;
      padding-left: 8px;
    }
    .opt_name {
      min-width: 110px;
      color: #2c406899;
    }
    .content_detail {
      padding-left: 16px;
      margin-left: 16px;
    }
  }
}
:deep(.garco-timeline-item-content) {
  background: #f7f9fc;
  padding: 8px;
}
:deep(.garco-timeline-item-dot) {
  width: 9px;
  height: 9px;
  left: -1px;
}
:deep(.garco-timeline-item-label-relative > .garco-timeline-item-label) {
  width: 140px;
}
</style>
